<template>
  <div style="padding: 0.35rem;" class="charge-index">
    <div
      style="height: 3.2rem;"
      class="container-flex"
      :class="[
        cardOilsTypeClass[propItem.cardOilsType],
        propItem.physicalCardNo ? 'stk' : ''
      ]"
    >
      <div style="flex: 2;" class="cardContainer">
        <div class="text" v-if="propItem.cardOilsType">
          {{ cardOilsTypeText[propItem.cardOilsType] }}余额
        </div>
        <div class="text" v-if="propItem.physicalCardNo">
          实体{{ cardOilsTypeText[propItem.cardType] }}余额
        </div>
        <div class="title">
          <!-- 实体卡余额的字段是physicalCardAmount, 电子卡余额的字段是totalAmt -->
          <span>
            {{
              propItem.physicalCardAmount || propItem.physicalCardAmount === 0
                ? propItem.physicalCardAmount.toFixed(2)
                : propItem.totalAmt.toFixed(2)
            }}</span
          >
          <span class="title1">元</span>
        </div>
      </div>
      <!-- <div style="flex: 1;" class="container-right">
        <span class="cardText">消费明细</span>
        <span class="cardText">充值明细</span>
      </div> -->
    </div>
    <div class="charge">
      <div class="title">充值金额</div>
      <!-- <div
        class="minAmt"
        v-if="cardOilsTypeText[chargeItem.cardOilsType] === '汽油卡'"
      >
        最低充值金额{{ this.gasolineMinAmt }}
      </div>
      <div
        class="minAmt"
        v-if="cardOilsTypeText[chargeItem.cardOilsType] === '柴油卡'"
      >
        最低充值金额{{ this.dieselMinAmt }}
      </div>
      <div
        class="minAmt"
        v-if="cardOilsTypeText[chargeItem.cardOilsType] === 'LNG卡'"
      >
        最低充值金额{{ this.LNGMinAmt }}
      </div>
      <div
        class="minAmt"
        v-if="cardOilsTypeText[chargeItem.cardOilsType] === 'CNG卡'"
      >
        最低充值金额{{ this.CNGMinAmt }}
      </div> -->
      <div class="amount">
        <!-- <span>{{ cardOilsTypeText[chargeItem.cardOilsType] }}</span> -->
        <input
          placeholder="输入充值金额"
          v-model="chargeAmount"
          @input="updateChangeAmount"
          type="number"
          step="0.01"
          min="0"
          onkeyup="this.value.includes('.')?this.value=(this.value.replace(/[^\d^\.]+/g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')).substring(0, this.value.indexOf('.') + 3)"
        />
        <span>￥</span>
      </div>

      <div
        class="div22"
        style="height:8rem;overflow-y:auto; padding-bottom:2rem;"
      >
        <!-- 自定义提示金额 -->
        <div class="container">
          <div
            class="btn tipAmt"
            v-for="(item, index) in customRemindAmountArr"
            :key="index"
            @click="selectRechargeAmt(item)"
          >
            <span>{{ item }}</span>
          </div>
        </div>

        <div class="container" v-if="!propItem.physicalCardNo">
          <!-- 满送活动提示  activityType: "balance" 的列表 -->
          <div
            class="btn1"
            v-for="(item, index) in discountList"
            :key="index"
            @click="selectDiscount(item.minRechargeAmt)"
          >
            <div
              class="money"
              :class="{ small_font: item.minRechargeAmt.length > 7 }"
            >
              <span>{{ "￥" + item.minRechargeAmt }}</span>
            </div>
            <div class="zhushi">
              <span
                >满{{ item.minRechargeAmt }}赠送{{
                  item.presentAmt && item.presentAmt + "元"
                }}{{ item.presentIntegral && item.presentAmt && " + "
                }}{{ item.presentIntegral && `${item.presentIntegral}积分` }}
                {{ item.hasCoupons && item.presentAmt && " + "
                }}{{ item.hasCoupons && "豪华优惠券礼包" }}</span
              >
            </div>
          </div>

          <!-- 赠送优惠券提示 activityType: "coupon" 列表 -->
          <!-- <div
            class="btn1"
            v-for="item in discountList2"
            :key="item.cardSettingDetailId"
            @click="selectDiscount(item.discountAmtStart, item)"
            style="display:flex;justify-content:center"
          >
            <div class="money">
              <span>￥</span>
              <span>{{ item.discountAmtStart }}</span>
            </div>
            <div class="zhushi">
            <span
                >满{{ item.discountAmtStart }}送{{ item.presentAmt
                }}{{ item.settingRuleType == "1" ? "元" : "%" }}</span
              >
              <span>满{{ item.discountAmtStart }}送 豪华优惠券包</span>
            </div>
          </div> -->
        </div>
      </div>
    </div>
    <!-- 充值赠送优惠券提示文字 -->
    <div>
      <div
        v-show="isShowTipText"
        class="tips_text"
        style="position: absolute;color: red;bottom: 2rem;text-align: center;width: 100%;"
      >
        <van-icon name="warning" />
        现充值{{ discountAmtStart }}元，还可获得豪华大额券包
      </div>
      <!-- 电子卡充值 -->
      <van-button
        v-if="!propItem.physicalCardNo"
        class="submit"
        :class="[chargeAmount !== '' ? 'selected' : '']"
        :loading="payLoading"
        loading-text="支付中..."
        @click="charge"
        :disabled="
          chargeAmount === '' ||
            chargeAmount <
              minNum(this.cardOilsTypeText[this.chargeItem.cardOilsType])
        "
      >
        确认充值
      </van-button>
      <!-- 实体卡充值 -->
      <van-button
        v-if="propItem.physicalCardNo"
        class="submit"
        :class="[chargeAmount !== '' ? 'selected' : '']"
        :loading="payLoading"
        loading-text="支付中..."
        @click="payPhysicalCard"
        :disabled="
          chargeAmount === '' ||
            chargeAmount <
              minNum(this.cardOilsTypeText[this.chargeItem.cardOilsType])
        "
      >
        确认充值
      </van-button>
    </div>
    <!-- 多站通用时，给电子卡选择具体某个站充值 面板
    <van-action-sheet
      v-model="stataionShow"
      :actions="stationActions"
      @select="onStationSelect"
      close-on-click-action
      cancel-text="取消"
    /> -->
  </div>
</template>
<script>
import { Button, Toast } from "vant";
import { mapState, mapGetters, mapActions } from "vuex";
import vue from "vue";

vue.use(Button);
vue.use(Toast);
export default {
  head() {
    return {
      title: "会员中心"
    };
  },
  data() {
    return {
      cardOilsTypeClass: ["generic", "gasoline", "diesel", "lng", "cng"],
      cardOilsTypeText: ["通用卡", "汽油卡", "柴油卡", "LNG卡", "CNG卡"],
      propItem: {},
      operator: null,
      activeNames: [],
      mask: false,
      cardList: [],
      cardUseRangeFlag: "", // 1多站通用 2单站
      cardTypeList: [],
      cardTypeIndex: 0,
      cardTypeChildList: [],
      chargeItem: {},
      chargeAmount: "",
      stationInfo: {},
      payLoading: false,
      show: false,
      discountList: [], // 满送提示胶囊列表
      discountList2: [], // 赠送优惠券提示胶囊列表
      tempEnterpriseId: undefined,
      stataionShow: false,
      stationActions: [],
      selectedStation: {},
      gasolineMinAmt: 0,
      dieselMinAmt: 0,
      LNGMinAmt: 0,
      CNGMinAmt: 0,
      customRemindAmountArr: [], // 自定义金额
      tipText: "", // 提示文本
      customerCardSettingDetailCouponInfo: {}, // 满送活动卡券信息
      discountAmtStart: 0
    };
  },
  computed: {
    ...mapState({
      pointInfo: state => state.point.pointInfo
    }),
    ...mapGetters({
      userInfo: "authen/userInfo"
    }),
    isShowTipText() {
      if (this.customerCardSettingDetailCouponInfo.discountAmtStart >= 0) {
        return true;
      } else {
        return false;
      }
    }
  },
  created() {
    let currentUrl = window.location.href;
    let urlObj = this.getUrlParams(currentUrl);
    console.log("currentUrl:", currentUrl);
    console.log("urlObj", JSON.parse(urlObj.item));
    this.propItem = JSON.parse(urlObj.item);
    this.operator= this.propItem.operator
    // 实体卡：cardType  ， 电子卡：cardOilsType
    if (this.propItem.physicalCardNo) {
      this.chargeItem.cardOilsType = this.propItem.cardType;
    } else {
      this.chargeItem.cardOilsType = this.propItem.cardOilsType;
    }

    console.log("chargeItem:", this.chargeItem);

    this.tempEnterpriseId =this.$route.query.enterpriseId || sessionStorage.getItem("enterpriseId");
    // this.c = this.tempEnterpriseId;

    sessionStorage.setItem("enterpriseId", this.tempEnterpriseId);
    $nuxt.$store.commit("authen/setEnterpriseId", this.tempEnterpriseId);

    this.selectedStation = this.propItem;
    setTimeout(() => {
      const phone = this.phone;
      console.log(phone);
      $nuxt.$store.commit("authen/setPhone", phone);

      // const appId = $nuxt.$store.getters["authen/appId"];

      if (!this.tempEnterpriseId) {
        alert("此页面不支持直接访问");
        return;
      }
      this.init();
    }, 500);
    this.getDiscount();
  },
  methods: {
    // 截取url参数
    getUrlParams(url) {
      let urlStr = url.split("&")[1];
      const urlSearchParams = new URLSearchParams(urlStr);
      const result = Object.fromEntries(urlSearchParams.entries());
      return result;
    },
    checkoutDropdown(index, item) {
      this.cardTypeIndex = index;
      this.cardTypeList[index].isUp = !this.cardTypeList[index].isUp;
      this.cardTypeChildIsUp = this.cardTypeList[index].isUp;
      this.cardTypeChildList = item.cardList;
    },
    // 最小值
    minNum(type) {
      const newMap = {
        汽油卡: this.gasolineMinAmt,
        柴油卡: this.dieselMinAmt,
        LNG卡: this.LNGMinAmt,
        CNG卡: this.CNGMinAmt
      };
      return newMap[type] || 0.01;
    },

    // 修改充值金额
    updateChangeAmount(e) {
      var price = "" + e.target.value;
      price = price.substring(0, 6); // 限制长度为6
      this.chargeAmount = price
        .replace(/[^\d.]/g, "") // 清除“数字”和“.”以外的字符
        .replace(/\.{2,}/g, ".") // 只保留第一个. 清除多余的
        .replace(".", "$#$")
        .replace(/\./g, "")
        .replace("$#$", ".")
        .replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3"); // 只能输入两个小数
      // if (price.indexOf(".") < 0 && price != "") {
      //   // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
      //   this.chargeAmount = '';
      // }
      // console.log('函数' + this.chargeAmount);
    },
    ...mapActions({
      getSdkConfig: "authen/getSdkConfig"
    }),
    onStationSelect(q) {
      console.log("q---1", q);
      this.selectedStation = q;
      this.mask = !this.mask;
      this.getDiscount();
    },
    switchMask() {
      this.mask = !this.mask;
    },
    async getDiscount() {
      this.discountList = [];
      // 拉取折扣
      const res = await this.$axios.$get(
        "/electronicCard/getRechargePrivilegeList",
        {
          params: {
            cardType: this.chargeItem.cardOilsType,
            stationId:
              this.propItem.cardUseRangeFlag == "1"
                ? this.selectedStation.stationId
                : this.selectedStation.stationId2
          }
        }
      );
      this.discountList = res.data;
      console.log(res, "res---------");
      // 拉取最低充值金额
      this.$axios
        .$get("/getCardRechargeMinAmt", {
          params: {
            enterpriseId: this.tempEnterpriseId
          }
        })
        .then(res => {
          if (res.retCode === 0) {
            this.gasolineMinAmt = res.data[0].gasolineMinAmt;
            this.dieselMinAmt = res.data[0].dieselMinAmt;
            this.LNGMinAmt = res.data[0].LNGMinAmt;
            this.CNGMinAmt = res.data[0].CNGMinAmt;
            if (res.data[0].customRemindAmount) {
              let str = res.data[0].customRemindAmount;
              this.customRemindAmountArr = str.split(",");
            }
            console.log("最低金额:", this.gasolineMinAmt);
            console.log("自定义金额：", this.customRemindAmountArr);
          }
        });
    },

    // 原先的 折扣逻辑
    // getDiscount() {
    //   this.discountList = [];
    //   console.log(this.propItem.cardUseRangeFlag , 'this.propItem.cardUseRangeFlag ');
    //   // 拉取折扣
    //   this.$axios
    //     .$get("/getCardRechargeSettingList", {
    //       params: {
    //         enterpriseId: this.tempEnterpriseId,
    //         cardOilsType: this.chargeItem.cardOilsType,
    //         stationId:
    //           this.propItem.cardUseRangeFlag == "1"
    //             ? this.selectedStation.stationId
    //             : this.selectedStation.stationId2
    //       }
    //     })
    //     .then(res => {
    //       if (res.retCode === 0) {
    //         console.log(res, 'res');
    //         this.discountList = res.data[0].customerCardSettingDetailList; // activityType: "balance" 的数据
    //         this.discountList2 =
    //           res.data[0].customerCardSettingDetailCouponList; // activityType: "coupon" 的数据
    //       }
    //     });
    //   console.log("---------");
    //   // 拉取最低充值金额
    //   this.$axios
    //     .$get("/getCardRechargeMinAmt", {
    //       params: {
    //         enterpriseId: this.tempEnterpriseId
    //       }
    //     })
    //     .then(res => {
    //       if (res.retCode === 0) {
    //         this.gasolineMinAmt = res.data[0].gasolineMinAmt;
    //         this.dieselMinAmt = res.data[0].dieselMinAmt;
    //         this.LNGMinAmt = res.data[0].LNGMinAmt;
    //         this.CNGMinAmt = res.data[0].CNGMinAmt;
    //         if (res.data[0].customRemindAmount) {
    //           let str = res.data[0].customRemindAmount;
    //           this.customRemindAmountArr = str.split(",");
    //         }
    //         console.log("最低金额:", this.gasolineMinAmt);
    //         console.log("自定义金额：", this.customRemindAmountArr);
    //       }
    //     });
    // },
    goCharge(ele) {
      if (this.stationActions.length == 1) {
        this.selectedStation = this.stationActions[0];
        this.mask = !this.mask;
      } else {
        this.stataionShow = true;
      }
      this.chargeItem = ele;
      this.getDiscount();
    },
    goCharges(ele) {
      console.log(ele);
      this.selectedStation = ele;
      this.mask = !this.mask;
      this.chargeItem = ele;
      this.getDiscount();
    },
    charge() {
      // if (this.chargeAmount < this.minNum(this.cardOilsTypeText[this.chargeItem.cardOilsType])) {
      //   Toast.fail('禁止输入最低金额');
      //   return false
      // }
      this.chargeAmount = this.chargeAmount.toString().replace(/\.$/g, "");
      this.pay();
    },
    init() {
      this.$axios
        .$get("/selectStaInfoList", {
          params: {
            enterpriseId: this.tempEnterpriseId
          }
        })
        .then(res => {
          if (res.retCode === 0) {
            if (!!res.data) {
              this.stationActions = res.data.map(ele => {
                return { ...ele, name: ele.stationName };
              });
            }
          }
        });
      // 获取卡片
      this.$axios
        .$get("/getElectronicCardList", {
          params: {
            mobilePhone: this.phone,
            enterpriseId: this.tempEnterpriseId
          }
        })
        .then(res => {
          if (res.retCode === 0) {
            this.cardUseRangeFlag = res.data.cardUseRangeFlag;
            if (res.data.cardUseRangeFlag === "1") {
              this.cardList = res.data.cardList;
            }
            if (res.data.cardUseRangeFlag === "2") {
              res.data.cardTypeList.forEach(item => {
                item.isUp = true;
              });
              this.cardTypeList = res.data.cardTypeList;
            }
          }
        });
      // this.cardList = [{"id":105,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622424586654","customerName":"Joe","amt":55455.83,"cardOilsType":"1","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM","recentlyTime":"Jun 2, 2021 5:22:26 PM"},{"id":106,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11619582798963","customerName":"Joe","amt":10005.06,"cardOilsType":"2","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM","recentlyTime":"Jun 2, 2021 5:22:39 PM"},{"id":115,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622424586607","customerName":"Joe","amt":55555,"cardOilsType":"3","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM"},{"id":116,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622424586654","customerName":"Joe","amt":55555,"cardOilsType":"4","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM"},{"id":119,"unionId":"o65PX6a8gYoXrRtsay4nid7vaN-k","customerNo":"11622538683941","customerName":"Joe","amt":0,"cardOilsType":"5","enterpriseId":1,"createTime":"Jun 3, 2021 10:29:58 AM"}]
      // 这一块纯为了后端方便而已，获取station的信息
      // this.$axios
      //   .$get("/getStationInfo", {
      //     params: {
      //       enterpriseId: this.tempEnterpriseId,
      //     },
      //   })
      //   .then((res) => {
      //     this.stationInfo = res.data;
      //   });
    },

    // 电子卡的充值
    async pay() {
      try {
        this.payLoading = true;
        console.log(this.operator);
        const orderData = await this.$axios.$post("/rechargeBalance", {
          operator: this.operator || null,
          amt: this.chargeAmount,
          enterpriseId: this.tempEnterpriseId,
          customerName: this.userInfo.nickname,
          cardOilsType: this.propItem.cardOilsType,
          mobilePhone: this.phone,
          stationId: this.selectedStation.stationId
            ? this.selectedStation.stationId
            : this.selectedStation.stationId2
        });

        if (orderData.retCode !== 0) {
          throw new Error(orderData.message);
        }

        const orderNum = orderData.data;
        console.log(orderNum, "orderNum");
        const payInfoData = await this.$axios.$post("/rechargeToThirdPayment", {
          amt: this.chargeAmount,
          openId: this.openId,
          enterpriseId: this.tempEnterpriseId,
          userType: "1",
          orderNo: orderNum,
          stationId: this.selectedStation.stationId
            ? this.selectedStation.stationId
            : this.selectedStation.stationId2
        });
        console.log("payInfoData", payInfoData);
        if (payInfoData.retCode !== 0) {
          throw new Error(payInfoData.message);
        }
        if (payInfoData.data.thirdPayment === "5") {
          window.location.href = payInfoData.data.redirectUrl;
        } else {
          const that = this;
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: payInfoData.data.payAppId,
              timeStamp: payInfoData.data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: payInfoData.data.paynonceStr, // 支付签名随机串，不长于 32
              package: payInfoData.data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: payInfoData.data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: payInfoData.data.paySign // 支付签名
            },
            function(res) {
              if (res.err_msg === "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                that.payLoading = false;
                Toast("支付成功");
              } else {
                that.payLoading = false;
                Toast("支付失败，请重试");
              }
            }
          );
          // const timestamp = payInfoData.data.payTimeStamp;
          // const nonceStr = payInfoData.data.paynonceStr;
          // const packageOrg = payInfoData.data.payPackage;
          // const signType = payInfoData.data.paySignType;
          // const paySign = payInfoData.data.paySign;

          // const that = this;
          // // 拉取微信支付
          // this.getSdkConfig({
          //   jsApiList: ["chooseWXPay"],
          // }).then((res) => {
          //   wx.config(res);
          //   wx.ready(function (res) {
          //     wx.chooseWXPay({
          //       timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          //       nonceStr, // 支付签名随机串，不长于 32 位
          //       package: packageOrg, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          //       signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          //       paySign, // 支付签名
          //       success: function (res) {
          //         that.payLoading = false;
          //         alert("支付完成");
          //       },
          //       cancel: function (err) {
          //         that.payLoading = false;
          //         alert("您取消了付款");
          //       },
          //       fail: function (err) {
          //         that.payLoading = false;
          //         alert(err);
          //       },
          //     });
          //   });
          //   wx.error(function (res) {
          //     alert("拉取微信Sdk配置出错");
          //   });
          // });
        }
      } catch (err) {
        this.payLoading = false;
        alert(err);
      }
    },

    // 实体卡的充值
    async payPhysicalCard() {
      console.log("实体卡充值", this.propItem);
      this.chargeAmount = this.chargeAmount.toString().replace(/\.$/g, "");
      try {
        this.payLoading = true;
        const param = {
          amount: this.chargeAmount, // 充值金额
          physicalCardNo: this.propItem.physicalCardNo, // 实体卡号
          enterpriseId: this.tempEnterpriseId,
          stationId: this.selectedStation.stationId
            ? this.selectedStation.stationId
            : this.selectedStation.stationId2
        };
        // 获取订单
        const res = await this.$axios.$post("/physicalCard/account/recharge", {
          ...param
        });
        if (res.retCode !== 0) {
          throw new Error(res.message);
        }
        const orderNo = res.data;

        // 微信充值--拉起支付（第三方支付）
        const param2 = {
          amt: this.chargeAmount,
          openId: this.openId,
          enterpriseId: this.tempEnterpriseId,
          userType: "1",
          orderNo: orderNo,
          stationId: this.selectedStation.stationId
            ? this.selectedStation.stationId
            : this.selectedStation.stationId2
        };
        const payInfoData = await this.$axios.$post(
          "/physicalCard/rechargeToThirdPayment",
          { ...param2 }
        );
        if (payInfoData.retCode !== 0) {
          throw new Error(payInfoData.message);
        }
        if (payInfoData.data.thirdPayment === "5") {
          // 云化支付
          window.location.href = payInfoData.data.redirectUrl;
        } else {
          const that = this;
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: payInfoData.data.payAppId,
              timeStamp: payInfoData.data.payTimeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: payInfoData.data.paynonceStr, // 支付签名随机串，不长于 32
              package: payInfoData.data.payPackage, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: payInfoData.data.paySignType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: payInfoData.data.paySign // 支付签名
            },
            function(res) {
              if (res.err_msg === "get_brand_wcpay_request:ok") {
                // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                that.payLoading = false;
                Toast("支付成功");
              } else {
                that.payLoading = false;
                Toast("支付失败，请重试");
              }
            }
          );
        }
      } catch (error) {
        this.payLoading = false;
        alert(error);
      }
    },

    // 点击了满送胶囊
    selectDiscount(discount, item = {}) {
      this.chargeAmount = discount; // 输入框的充值金额
      this.discountAmtStart = item.minRechargeAmt;
      this.customerCardSettingDetailCouponInfo = item; // 只有点击了activitType是coupon的胶囊才有item值

      console.log("点击的胶囊", item);
      console.log("当前输入的充值金额：", this.chargeAmount);
    },
    // 点击自定义提示金额
    selectRechargeAmt(amt) {
      this.chargeAmount = amt;
      this.customerCardSettingDetailCouponInfo = {}; //  只有点击了activitType是coupon的胶囊才有充值赠送优惠券提示
    }
  }
};
</script>

<style scoped lang="scss">
.cardText {
  color: #fff;
  font-size: 0.25rem;
  flex: 1;
  text-align: center;
}
.container-right :nth-child(1) {
  border-right: 1px solid #fff;
}
.charge-index {
  position: relative;
  height: 100vh;
  overflow-x: hidden;
  box-sizing: border-box;
}

.charge-index .background {
  background-color: #f3b335;
  width: 7.5rem;
  height: 7.5rem;
  position: relative;
  background: url("~static/personal/23@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  z-index: -1;
  overflow: hidden;
}

.charge-index .background .headline {
  width: 6.9rem;
  height: 4.33rem;
  background: url("~static/personal/bj2@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  margin: 0.3rem auto;
  display: relative;
}

.text1 {
  position: absolute;
  left: 0.8rem;
  top: 1.6rem;
  color: #8e9aae;
  font-size: 0.3rem;
  font-weight: 600;
}

.text2 {
  position: absolute;
  left: 0.8rem;
  top: 2.2rem;
  color: #8e9aae;
  font-size: 0.3rem;
  font-weight: 600;
}

.charge-index .content {
  position: absolute;
  top: 3.78rem;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  background-color: #ffffff;
  border-radius: 0.3rem 0.3rem 0 0;
  padding: 0.3rem;
  overflow: scroll;
}

.charge-index .content > div:not(.title) {
  width: 6.9rem;
  /* height: 1.6rem; */
  margin-top: 0.3rem;
  position: relative;
}

.charge-index .content .title {
  font-size: 0.35rem;
  color: #333333;
  font-weight: 600;
}
.generic {
  background: url("~static/personal/tyk.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.gasoline {
  background: url("~static/personal/qiyouka.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.diesel {
  background: url("~static/personal/cyk.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.notoil {
  background: url("~static/personal/bj5.2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.lng {
  background: url("~static/personal/lng.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}

.cng {
  background: url("~static/personal/cng.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.stk {
  background: url("~static/personal/stk.png") no-repeat 0px 0px;
  background-size: 100% 100%;
}
.cardContainer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cardContainer2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.title {
  height: 0.45rem;
  font-size: 0.45rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 0.45rem;
}
.title1 {
  height: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 0.45rem;
}

.text {
  color: #ffffff;
  height: 0.45rem;
  font-size: 0.32rem;
  font-weight: 500;
  line-height: 0.45rem;
  padding-bottom: 0.35rem;
}

.text span {
  color: #fff;
}

.charge-index .content div button {
  border: none;
  background-color: transparent;
  outline: none;
  display: block;
  width: 1.4rem;
  height: 0.6rem;
  background: #ffffff;
  border-radius: 0.3rem;
  position: absolute;
  top: 0.5rem;
  right: 0.3rem;
}

.charge-index .content .cng button {
  color: #45579e;
}

.charge {
  height: 9.5rem;

  box-sizing: border-box;
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charge > div:not(:nth-child(1)):not(.container) {
  margin-top: 0.2rem;
}

.charge .title {
  width: 6.5rem;
  height: 0.45rem;
  font-size: 0.25rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 700;
  color: #111111;
  line-height: 0.45rem;
  text-align: start;
}

.charge .title .close {
  background: url("~static/personal/6_d05_close@2x.png") no-repeat 0px 0px;
  background-size: 100% 100%;
  width: 0.4rem;
  height: 0.4rem;
  float: right;
}

.charge .tip {
  height: 0.33rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #aaaaaa;
  line-height: 0.33rem;
}

.charge .minAmt {
  height: 0.33rem;
  font-size: 0.24rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #e87d6d;
  line-height: 0.33rem;
}

.charge .amount {
  width: 6.9rem;
  height: 1.8rem;
  background-color: #efefef;
  border-radius: 0.2rem;
  // background: url("~static/personal/biankuang@2x.png") no-repeat 0px 0px;
  // background-size: 100% 100%;
  position: relative;
}

.charge .amount span:nth-child(1) {
  height: 1rem;

  font-size: 0.28rem;
  font-weight: 600;
  color: #884e16;
  line-height: 0.4rem;
  position: absolute;
  top: 0.4rem;
  left: 0.51rem;
}

.charge .amount input {
  background: none;
  outline: none;
  border: none;
  height: 1rem;
  width: 100%;
  font-size: 0.25rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  line-height: 0.4rem;
  position: absolute;
  left: 1rem;
}

.charge .amount span:nth-last-child(1) {
  height: 1rem;

  font-size: 0.25rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000;
  line-height: 0.4rem;
  position: absolute;
  top: 0.32rem;
  left: 0.4rem;
}

button {
  border: none;
  outline: none;
  bottom: 0.2rem;
  position: absolute;
  width: 6.9rem;
  height: 0.8rem;
  left: 0.3rem;
  background: #cccccc;
  border-radius: 0.45rem;
  font-size: 0.32rem;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  line-height: 0.45rem;
}
button.selected {
  background: linear-gradient(to left, #10ba65 0%, #028645 100%);
}

.container {
  width: 6.9rem;
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  // padding: 0.3rem 0.3rem;
  justify-content: space-between;
  overflow: scroll;
  // min-height: 2rem;
}

.container .btn {
  display: inline-block;
  width: 2rem;
  height: 1rem;
  background: #efefef;
  box-shadow: 0 0.04rem 0.08rem 0 #f2f2f2;
  border-radius: 0.42rem;
  margin: 0 0.2rem;
  margin-bottom: 0.35rem;
  position: relative;
  box-sizing: border-box;
  text-align: center;
}
.container .btn:nth-child(1) {
  margin: 0;
  margin-bottom: 0.35rem;
}
.container .btn:nth-last-child(1) {
  margin: 0;
  margin-bottom: 0.35rem;
}
.container .btn1 {
  display: inline-block;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  background: #efefef;
  box-shadow: 0 0.04rem 0.08rem 0 #f2f2f2;
  border-radius: 0.42rem;
  margin-bottom: 0.35rem;
  position: relative;
  box-sizing: border-box;
  padding: 0 0.26rem;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.btn1 .money {
  width: 2rem;
  text-align: center;
  border-right: 1px solid #e0e0e0;
  font-size: 0.35rem;
  line-height: 0.3rem;
  color: #ff6600;
  padding-right: 10px;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: pre-line;
}
.btn1 .zhushi {
  text-align: center;
  font-size: 0.25rem;
  line-height: 0.3rem;
  color: #747474;
  padding-left: 10px;
  box-sizing: border-box;
  flex: 1;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
}
/* 提示金额css */
.container .tipAmt {
  display: flex;
  justify-content: center;
  align-items: center;
  > span:nth-of-type(1) {
    font-size: 0.4rem;
  }
}

.container .btn span {
  font-size: 0.3rem;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #000;
  line-height: 0.84rem;
}

.container .btn span:nth-child(1) {
  border-radius: 0.42rem;
  font-size: 0.3rem;
  float: left;
}

.container .btn span:nth-child(2) {
  float: left;
  font-weight: 600;
  font-size: 0.4rem;
}

.container .btn span:nth-child(3) {
  font-size: 0.15rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.29);
  float: right;
}

.container-flex {
  display: flex;
  flex-direction: column;
  padding: 0.35rem;
  box-sizing: border-box;
}

.container-right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.van-cell__title {
  width: 6.9rem;
  height: 1.6rem;
}

.van-collapse-item__content .gasoline {
  height: 1.6rem;
}

.van-collapse-item__content .diesel {
  height: 1.6rem;
}
.submit {
  position: fixed;
  bottom: 1rem;
}
.small_font {
  font-size: 0.3rem !important;
}
</style>
